<template>
  <div class="top-wrap">
    <span class="title">开源社区专区</span>
    <ul class="menu-wrap">
      <li
        v-for="(item, index) in munuList"
        :key="index"
        :class="{ 'select-menu': currentIndex === index }"
        @click="changeMenu(index, item.path)"
      >
        {{ item.name }}
      </li>
    </ul>
    <!-- <img src="@/assets/images/home/nav-bac.png" alt="" class="nav-bac"> -->
    <div class="user-wrap">
      <img src="@/assets/images/home/user.png" alt="" />
      <span>武汉光谷数字产业集团有限公司</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      theme: this.$store.state.settings.theme,
      sideTheme: this.$store.state.settings.sideTheme,
      munuList: [
        { name: "首页", path: "/index" },
        { name: "开源代码共享", path: "/code-sharing" },
        { name: "科创问答GPT", path: "/questions-answer" },
        { name: "课程学习", path: "/course-learning" },
        { name: "技术前沿", path: "/technological-frontier" },
        { name: "科创论坛", path: "/technology-innovation" },
        { name: "极客揭榜", path: "/geek-unveiling" },
        { name: "创新创意大赛", path: "/creative-competition" },
        { name: "积分奖励兑换", path: "/point-rewards" },
      ],
      currentIndex: 0,
    };
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.settings.showSettings;
      },
    },
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "fixedHeader",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "topNav",
          value: val,
        });
        if (!val) {
          this.$store.dispatch("app/toggleSideBarHide", false);
          this.$store.commit(
            "SET_SIDEBAR_ROUTERS",
            this.$store.state.permission.defaultRoutes
          );
        }
      },
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "tagsView",
          value: val,
        });
      },
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "sidebarLogo",
          value: val,
        });
      },
    },
    dynamicTitle: {
      get() {
        return this.$store.state.settings.dynamicTitle;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "dynamicTitle",
          value: val,
        });
      },
    },
  },
  methods: {
    // 切换菜单
    changeMenu(val, path) {
      console.log(path, "path====");
      this.currentIndex = val;
      this.$router.push({ path: path });
    },
    themeChange(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "theme",
        value: val,
      });
      this.theme = val;
    },
    handleTheme(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "sideTheme",
        value: val,
      });
      this.sideTheme = val;
    },
    saveSetting() {
      this.$modal.loading("正在保存到本地，请稍候...");
      this.$cache.local.set(
        "layout-setting",
        `{
            "topNav":${this.topNav},
            "tagsView":${this.tagsView},
            "fixedHeader":${this.fixedHeader},
            "sidebarLogo":${this.sidebarLogo},
            "dynamicTitle":${this.dynamicTitle},
            "sideTheme":"${this.sideTheme}",
            "theme":"${this.theme}"
          }`
      );
      setTimeout(this.$modal.closeLoading(), 1000);
    },
    resetSetting() {
      this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
      this.$cache.local.remove("layout-setting");
      setTimeout("window.location.reload()", 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.top-wrap {
  height: 66px;
  background: url("~@/assets/images/home/nav-bac.png") left top no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .title {
    color: rgb(13, 134, 255);
    font-family: ysbthzt;
    font-size: 30px;
    font-weight: 400;
    line-height: 42px;
    letter-spacing: 0px;
    text-align: left;
    margin-left: 50px;
  }
  .menu-wrap {
    display: flex;
    justify-content: flex-start;
    margin-left: 30px;
    li {
      height: 66px;
      line-height: 66px;
      padding: 0 15px;
      color: rgb(68, 75, 86);
      font-family: SourceHanSansCN-VF-2;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      text-align: center;
      cursor: pointer;
      &.select-menu {
        color: rgb(13, 134, 255);
        background: linear-gradient(
          180deg,
          rgb(233, 245, 255),
          rgb(196, 235, 255) 100%
        );
      }
    }
  }
  // .nav-bac{
  //   position: absolute;
  //   top: 0;
  //   right: 100px;
  //   width: 420px;
  //   height: 352px;
  // }
  .user-wrap {
    box-sizing: border-box;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    background: rgba(197, 230, 255, 0.8);
    display: flex;
    align-items: center;
    padding: 8px 15px;
    position: absolute;
    top: 10px;
    right: 20px;
    span {
      color: rgb(13, 134, 255);
      font-family: SourceHanSansCN-VF-2;
      font-size: 18px;
      font-weight: 400;
      line-height: 28px;
      letter-spacing: 0px;
      text-align: center;
      margin-left: 16px;
    }
  }
}
</style>
